import { Button, Checkbox, Form, Input, Radio, Select, Space } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { uniqueId } from "lodash";
import Common from "./Common";

const CSelect = () => {
  const [form] = Form.useForm();
  const onRadioClick = (key: number) => {
    console.log(key)
    console.log(form.getFieldValue('checked'))
    if (form.getFieldValue('checked') === key) {
      form.setFieldsValue({ checked: '' })
    }
  }
  const Options = ({ inputType }: { inputType: string }) => (
    <Form.List name="options">
      {(fields, { add, remove }) => (
        <>
          {fields.map(({ key, name, fieldKey, ...restField }) => (
            <Space key={key} align="baseline">
              {inputType === 'radio' ? <Radio value={key} onClick={() => onRadioClick(key)} /> :
                <Checkbox value={key} />
              }
              <Form.Item
                {...restField}
                name={[name, 'value']}
                fieldKey={[fieldKey, 'value']}
                rules={[{ required: true, message: '请输入值' }]}
              >
                <Input placeholder="value" />
              </Form.Item>
              <Form.Item
                {...restField}
                name={[name, 'text']}
                fieldKey={[fieldKey, 'text']}
                rules={[{ required: true, message: '请输入名称' }]}
              >
                <Input placeholder="text" />
              </Form.Item>
              <MinusCircleOutlined onClick={() => remove(name)} />
            </Space>
          ))}
          <Form.Item>
            <Button type="dashed" onClick={() => {
              add({ key: uniqueId('key_') }, fields.length)
            }} block icon={<PlusOutlined />}>
              添加选项
            </Button>
          </Form.Item>
        </>
      )}
    </Form.List>
  )
  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={{
        inputType: 'radio'
      }}
      onValuesChange={(changeValue, values) => {
        if (Object.keys(changeValue)[0] === 'inputType') {
          form.setFieldsValue({ checked: '' })
          console.log(Object.keys(changeValue))
        }
        console.log(values)
      }}
    >
      {
        ({ inputType }) => (
          <>
            {
              Common(form)
            }
            <Form.Item name='inputType' label='组件类型'>
              <Select options={[
                {
                  label: '单选下拉选项',
                  value: 'radio'
                }, {
                  label: '复选下拉选项',
                  value: 'check'
                }
              ]} />
            </Form.Item>
            <Form.Item label="校验" name='required' valuePropName="checked">
              <Checkbox>必填</Checkbox>
            </Form.Item>
            <Form.Item label='选项' name='checked'>
              {
                inputType === 'radio' ?
                  <Radio.Group>
                    <Options inputType={inputType} />
                  </Radio.Group>
                  :
                  <Checkbox.Group name='checked'>
                    <Options inputType={inputType} />
                  </Checkbox.Group>
              }
            </Form.Item>
          </>
        )
      }
    </Form >
  )
}

export default CSelect;

{/* <Form.Item name='defaultValue' label='默认值'>
        <Select options={[
          {
            label: '自定义',
            value: 'custom'
          },
          {
            label: '数据联动',
            value: 'dataSouce'
          },
          {
            label: '自定义',
            value: 'formula'
          }
        ]}/>
      </Form.Item> */}
{/* <Form.Item name='label' label='标题'>
        <Input />
      </Form.Item> */}
{/* <Form.Item name='name' label='name' required>
        <Input />
      </Form.Item> */}
{/* <Form.Item name='placeholder' label='占位符'>
        <Input />
      </Form.Item> */}
{/* <Form.Item name='desc' label='描述信息'>
        <Input.TextArea />
      </Form.Item> */}
